<template>
  <div class="orderList">
    <div class="orderList_top">
      <div class="search-bar">
        <van-icon class="back-icon" name="arrow-left" @click="back" />
        <van-search class="search-input" placeholder="搜索订单" wrap-with-form />
      </div>
    </div>
    <div class="orderList_content">
      <van-tabs v-model:active="active" swipeable sticky offset-top="54" @change="tabsChange">
        <van-tab v-for="tab in tabsData" :title="tab">
          <van-card v-for="item in 10" class="goods-card" num="2" price="2.00" desc="描述信息" title="商品标题"
            thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-button size="mini">按钮</van-button>
              <van-button size="mini">按钮</van-button>
            </template>
          </van-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
console.log('sads', route.query.status);


const active = ref(Number(route.query.status))
console.log(active.value)
const tabsData = ref(['全部', '待付款', '待收货'])
function tabsChange(name, title) {
  console.log('tabs切换', name, title);
}

function back() {
  router.back()
}
</script>

<style lang="scss" scoped>
.orderList {
  display: flex;
  flex-direction: column;

  .orderList_top {
    position: relative;
    height: 54px;
  }

  .orderList_content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 启用惯性滚动 */
  }
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;

  .back-icon {
    height: 100%;
    width: 20px;
    color: #666;
    padding-left: 5px;
  }

  .search-input {
    flex: 1;
    border-radius: 100px !important;
  }
}

:deep(.van-search__content) {
  border-radius: 100px !important;
}

.goods-card {
  margin: 10px 10px 0 10px;
  background-color: #fff;
  border-radius: 10px;
}

.delete-button {
  height: 100%;
}
</style>